<template>
  <div>
    <a-button type="primary" @click="show">
      查看模板json
    </a-button>
    <a-modal :visible="visible" :maskClosable="false"
             @cancel="hideModal">
      <a-spin :spinning="spinning" style="min-height: 100px">
        <a-textarea style="width:40vw;height:50vh" v-model="jsonOut"/>
      </a-spin>
      <template slot="title">
        <a-space>
          <div style="margin-right: 20px">JSON</div>
          <a-switch checked-children="tid模式" un-checked-children="默认" v-model:checked="tidMode"
                    @change="onModeChange"/>
          <a-switch checked-children="美化" un-checked-children="压缩" v-model:checked="beautify"
                    @change="onModeChange"/>
        </a-space>
      </template>
      <template slot="footer">
        <a-button key="close" type="info" @click="hideModal">
          关闭
        </a-button>
      </template>
    </a-modal>
  </div>
</template>

<script lang="ts">
import { toRefs } from 'vue';
import importConfig from './jsonView';
export default {
    name: 'printDesign',
    props: {
      template: {
        default: {},
        required: true,
      }
    },
    setup(props) {
        const {
            base,
            hideModal,
            show,
            onModeChange,

        } = importConfig(props);
        return {
            ...toRefs(base),
            hideModal,
            show,
            onModeChange,
            
        };
    },
};
</script>

<style lang="less" scoped>
:deep(.ant-modal-body) {
  padding: 0px;
}

:deep(.ant-modal-content) {
  margin-bottom: 24px;
}
</style>
